import {useEffect, useMemo, useRef, useState} from 'react'
import './App.css'
import EventLoopList from "./VirtualList/EventLoopList";
import {Input, Radio} from 'antd'
import NormalList from "./VirtualList/NormalList";
import NormalVirtualList from "./VirtualList/NormalVirtualList";
// React 18 之前
const App = () => {
  const [count1, setCount1] = useState(0);
  const [type, setType] = useState(2)

  const VirtualList = useMemo(() => ({
    0: NormalList,
    1: EventLoopList,
    2: NormalVirtualList,
  }[type]), [type])

  return (
    <>
      <Input/>
      <button onClick={() => setCount1(count1 + 1)}>
        {`count1 is ${count1}`}
      </button>
      <Radio.Group value={type} onChange={(e) => setType(e.target.value)}>
        <Radio value={0}>正常渲染</Radio>
        <Radio value={1}>事件循环列表</Radio>
        <Radio value={2}>常规虚拟列表</Radio>
      </Radio.Group>
      <VirtualList/>
    </>
  );
};

export default App;
